<template> 
    <div>
        <p>jenkins操作</p>
        <button class="btn" @click="clearSelectedProject">取消选中项目</button>
        <button class="btn" @click="selectedAllProject">一键多选</button>
        
        <div v-if="message" :class="['message', messageType]">
        {{ message }}
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
const messageType = ref('success')

const clearSelectedProject = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  const response = await chrome.tabs.sendMessage(tab.id, { action: 'clearCheckProject' })
  if (response.success) {
    message.value = '取消选中项目成功！'
    messageType.value = 'success'
  } else {
    message.value = '取消选中项目失败！'
    messageType.value = 'error'
  }
}
const selectedAllProject = async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
  const response = await chrome.tabs.sendMessage(tab.id, { action: 'selectedAllProject' })
  if (response.success) {
    message.value = '一键多选成功！'
    messageType.value = 'success'
  } else {
    message.value = '一键多选失败！'
    messageType.value = 'error'
  }
}
</script>